<script setup>
import topHeaderWorld from '../TopHeader/topHeaderWorld.vue';
import chargingPointsCityWorld from '../charts/chargingPointsCityWorld.vue';
import ButtonWorld from '../button/ButtonWorld.vue';
import SalesPowerWorld from '../charts/SalesPowerWorld.vue';
import stockRegionWorld from '../charts/stockRegionWorld.vue';
import salesmode from '../charts/salesmode.vue';
import ChargingPointsWorld from '../charts/ChargingPointsWorld.vue';
import SalesModePileWorld from '../charts/SalesModePileWorld.vue';
</script>

<template>
    <div class="data-view">
        <dv-full-screen-container>
            <!-- Top Header Section -->
            <div class="top-header">
                <ButtonWorld></ButtonWorld>
                <topHeaderWorld></topHeaderWorld>
            </div>

            <!-- Body Section -->
            <div class="row">
                <!-- First Column -->
                <div class="col">
                    <!-- 1st row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-13>
                                <SalesPowerWorld></SalesPowerWorld>
                            </dv-border-box-13>
                        </div>
                    </div>
                    <!-- 2nd row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-12>
                                <stockRegionWorld></stockRegionWorld>
                            </dv-border-box-12>
                        </div>
                    </div>
                </div>

                <!-- Second Column -->
                <div class="col">
                    <!-- 1st row (30% height) -->
                    <div class="row first-row">
                        <div class="col-item">
                            <dv-border-box-11 title="全球部分国家充电桩数量" style="font-family: YouYuan;font-weight: bolder;">
                                <chargingPointsCityWorld></chargingPointsCityWorld>
                            </dv-border-box-11>
                        </div>
                    </div>
                    <!-- 2nd row (70% height) -->
                    <div class="row second-row">
                        <div class="col-item">
                            <dv-border-box-10>
                                <ChargingPointsWorld></ChargingPointsWorld>
                            </dv-border-box-10>
                        </div>
                    </div>
                </div>

                <!-- Third Column -->
                <div class="col">
                    <!-- 1st row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-13>
                                <SalesModePileWorld></SalesModePileWorld>
                            </dv-border-box-13>
                        </div>
                    </div>
                    <!-- 2nd row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-12>
                                <salesmode></salesmode>
                            </dv-border-box-12>
                        </div>
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<style lang="css" scoped>
    /* Overall page styling */
    .data-view {
        width: 100vw;
        height: 100vh;
        background-color: black;
        color: white;
        display: flex;
        flex-direction: column;
    }

    /* Full-screen container styling */
    #dv-full-screen-container {
        background-image: url('@/assets/imgs/bk6.jpg');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Top Header styling */
    .top-header {
        width: 100%;
        height: 100px;
        background-color: #333; /* Dark background for top header */
    }

    /* Row layout for the entire page */
    .row {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
    }

    /* Column layout for each section */
    .col {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 10px;
        gap: 10px; /* Space between rows in each column */
    }

    .col:first-child, .col:last-child {
        width: 27%; /* Each side column takes 27% of the screen */
    }

    .col:nth-child(2) {
        width: 46%; /* Middle column takes 46% of the screen */
    }

    /* Column content */
    .col-item {
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Specific row height configurations */
    .first-row {
        height: 60%; /* 30% height for first row in second column */
    }

    .second-row {
        height: 35%; /* 70% height for second row in second column */
    }

    /* Ensuring remaining rows have equal height */
    .row > .col-item {
        flex: 1; /* Each item in the row will take equal height */
    }
</style>
